<template>
  <div class="home">
    <!-- <input v-if="num<11" type="text" v-focus="89" v-model="num"> -->
      <input type="text" v-slice="num">
      <div>{{num}}</div>
    <p>我是input下面的p标签</p>
    <button @click="add" v-back="['blue','red']">点击++</button>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data(){
    return{
      num: 10
    }
  },
  created () {
    
  },
  methods: {
    add(){
      this.num++;
    }
  },
  directives:{
    focus:{
      // bind(el,binding,vnode){ // bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
      //   // console.log(el);
      //   // console.log(binding);
      //   // console.log(vnode.context['89']);
      // },


      // inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。

      // inserted(el,binding,vnode){
      //   console.log(el);
      //   console.log(binding);
      //   console.log(vnode);
      // }

      // update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
      //  update(el,binding,vnode){
      //   console.log(el);
      //   console.log(binding);
      //   console.log(vnode);
      // }
      // componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
      // componentUpdated(el,binding,vnode){
      //   console.log(el);
      //   console.log(binding);
      //   console.log(vnode);
      // },
      // unbind:只调用一次，指令与元素解绑时调用。
      // unbind(el,binding,vnode){
      //   console.log(el);
      //   console.log(binding);
      //   console.log(vnode);
      // },
    }
  }
}
</script>
